اضافه کردن آیکون چشم مشاهده پسورد در Asp.net Core

یه فرم لاگین طراحی کردم که برای نام کاربری و رمز عبور از کامپوننت سینکفیوژن استفاده کردم. میخوام وقتی کاربر رمز عبور رو وارد میکنه یه آیکون چشم هم کنار رمز عبور نمایش داده بشه که وقتی روش کلیک میکنم پسورد رو نمایش بده.

<form>
   <ejs-textbox ejs-for="Email" placeholder="نام کاربری"></ejs-textbox>
   <ejs-textbox type="password" placeholder="رمز عبور"></ejs-textbox>
   <button type="submit">ورود</button>
</form>

فرم لاگین من به صورت خلاصه مشابه بالا هست.

ویرایش شده در دوشنبه 27 مرداد 1404 ساعت 13:19:15

مشخصات سوال کننده :

کاربر : hamid_b امتیاز کاربر : 518 رتبه کاربر : 4

دسته بندی : Asp.net Core جاوا اسکریپت Syncfusion

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 540

هوش مصنوعی

پاسخ هوش مصنوعی

برای اضافه کردن آیکون چشم مشاهده رمز عبور در فرم لاگین با استفاده از سینکفیوژن، می توانید از CSS و JavaScript استفاده کنید. به طور کلی شما به یک آیکون و یک تابع برای تغییر نوع ورودی نیاز دارید. در ادامه یک روش را برای شما توضیح می دهم:

<form>
   <ejs-textbox ejs-for="Email" placeholder="نام کاربری"></ejs-textbox>
   <div style="position: relative;">
       <ejs-textbox id="passwordField" type="password" placeholder="رمز عبور"></ejs-textbox>
       <span id="togglePassword" style="cursor: pointer; position: absolute; right: 10px; top: 10px;">
           <i class="fas fa-eye"></i>
       </span>
   </div>
   <button type="submit">ورود</button>
</form>

در این کد یک div اضافه شده که شامل فیلد رمز عبور و آیکون چشم است. حالا می توانید با یک قطعه JavaScript به آیکون چشم عملکرد بدهید:


document.getElementById('togglePassword').addEventListener('click', function () {
    const passwordField = document.getElementById('passwordField');
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        this.innerHTML = '<i class="fas fa-eye-slash"></i>'; // تغییر به آیکون چشم بسته
    } else {
        passwordField.type = 'password';
        this.innerHTML = '<i class="fas fa-eye"></i>'; // تغییر به آیکون چشم باز
    }
});

این کد JavaScript نوع ورودی فیلد را به text یا password تغییر می دهد و همچنین آیکون را به طور مناسب تغییر می دهد. توجه داشته باشید که برای استفاده از آیکون های FontAwesome، باید لینک مربوط به آن را در قسمت <head> صفحه خود اضافه کنید.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : fateme 11:47 1404/04/05

نمایش و پنهان کردن پسورد توسط جاوااسکریپت در سینکفیوژن

شما می تونید توسط کد زیر این کار رو انجام بدید. ابتدا از متد Created در textbox استفاده کنید و یک تابع ایجاد کنید :

<form>
   <ejs-textbox ejs-for="Email" placeholder="نام کاربری"></ejs-textbox>
   <ejs-textbox type="password" created="onCreate" placeholder="رمز عبور"></ejs-textbox>
   <button type="submit">ورود</button>
</form>

در کد بالا تابع onCreated رو ایجاد کردیم. حالا در بخش کدهای جاوااسکریپت این تابع رو به صورت زیر بنویسید :

function onCreate() {
    this.addIcon("append", "e-icons e-input-eye");
    document.getElementsByClassName("e-input-eye")[0].addEventListener("click", function (e) {
        let textObj = document.getElementById("Password").ej2_instances[0];
        if (textObj.element.type === "password") {
            textObj.element.type = "text";
        } else {
            textObj.element.type = "password";
        }
    });
}

برای اینکه یه آیکون چشم هم نمایش داده بشه از استایل زیر استفاده کنید :

<style>
    .e-input-eye:before {
        content: '\e345';
        font-family: e-icons;
        font-size: 13px;
    }
</style>

خب الان اگر خروجی کار رو مشاهده کنید چیزی مشابه زیر باید داشته باشید.

نمایش رمز عبور در فرم لاگین در Core

ویرایش شده در پنج شنبه 5 تیر 1404 ساعت 11:47:39

به این پاسخ امتیاز بدهید 0

امتیاز: 1635 رتبه: 2

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

اضافه کردن آیکون چشم مشاهده پسورد در Asp.net Core

پاسخ هوش مصنوعی

نمایش و پنهان کردن پسورد توسط جاوااسکریپت در سینکفیوژن

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین